<template>
	<view>
		<view v-show="show" :style="{ top: offsetTop + 'px' }" class="uni-mask" />
		<view v-show="show" :class="'uni-popup-' + position + ' ' + 'uni-popup-' + mode" class="uni-popup">
			<view class="reminder-content">
				<image style="width: 216upx; height: 192upx;" :src="agreementUrl" mode=""></image>
				<view class="font-size32 margin-top-20">温馨提示</view>
				<block v-if="isAgree">
					<view class="policy-tips margin-top-20">
						<view class="font-size24">欢迎使用轶伦APP！</view>
						<view class="margin-top-20 font-size24">在使用我们的产品前，请您先阅读并了解<label style="color: #0066CC;" @tap="userAgreement">《用户协议》</label>和<label
							 style="color: #0066CC;" @tap="privacyPolicy">《隐私政策》</label>。</view>
						<view class="margin-top-20 font-size24">我们非常重视您的个人信息保护。点击“同意”即表示你已阅读并同意全部条款，可以继续使用我们的产品和服务。</view>
					</view>
					<view class="operation-btn">
						<button class="disagree-btn" @tap="disagree">不同意</button>
						<button class="agree-btn" @tap="agree">同意</button>
					</view>
				</block>
				<block v-else>
					<view class="policy-tips margin-top-20">
						<view class="margin-top-20 font-size24">您的信息仅用于为您提供服务，我们将全力保障您的信息安全。</view>
						<view class="margin-top-20 font-size24">如果您仍不同意本隐私政策，很遗憾我们将无法继续为您提供服务。</view>
					</view>
					<view class="operation-btn">
						<button class="disagree-btn" @tap="exitApp">退出应用</button>
						<button class="agree-btn" @tap="agree">同意并继续</button>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/js/config.js'
	export default {
		name: 'UniPopup',
		props: {
			position: {
				type: String,
				// top - 顶部， middle - 居中, bottom - 底部
				default: 'middle'
			},
			/**
			 * 显示模式
			 */
			mode: {
				type: String,
				default: 'insert'
			},
			buttonMode: {
				type: String,
				default: 'bottom'
			}
		},
		data() {
			return {
				offsetTop: 0,
				show: true,
				agreementUrl: require('../../static/image/jnpf72.png'),//config.Resources.common.agreement,
				isAgree: true,
				agreement:'',//config.Resources.userAgreement,
				policy:'',//config.Resources.privacyPolicy,
			}
		},
		created() {
			let offsetTop = 0
			// #ifdef H5
			if (!this.h5Top) {
				offsetTop = 44
			} else {
				offsetTop = 0
			}
			// #endif
			this.offsetTop = offsetTop
		},
		methods: {
			moveHandle() {},
			agree() {
				this.show = false;
			},
			disagree() {
				this.isAgree = false;
			},
			exitApp() {
				plus.os.name == "Android" ? plus.runtime.quit() : plus.ios.import("UIApplication").sharedApplication().performSelector("exit");
			},
			userAgreement() {
				plus.runtime.openURL(this.agreement);
			},
			privacyPolicy() {
				plus.runtime.openURL(this.policy);
			}
		},
	}
</script>
<style>
	.uni-mask {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		transition: background 0.3s linear;
	}

	.uni-popup {
		position: fixed;
		z-index: 999;
		background-color: #ffffff;
	}

	.uni-popup-middle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 20upx;
		/* width: 70%; */
	}

	.uni-popup-middle.uni-popup-insert {
		min-width: 380upx;
		min-height: 380upx;
		max-width: 100%;
		max-height: 80%;
		transform: translate(-50%, -65%);
		background: none;
		box-shadow: none;
	}

	.uni-close-bottom,
	.uni-close-right {
		position: absolute;
		bottom: -180upx;
		text-align: center;
		border-radius: 50%;
		color: #f5f5f5;
		font-size: 60upx;
		font-weight: bold;
		opacity: 0.8;
		z-index: -1;
	}

	.uni-close-bottom {
		margin: auto;
		left: 0;
		right: 0;
	}

	.uni-close-right {
		right: -60upx;
		top: -80upx;
	}

	.uni-close-bottom:after {
		content: '';
		position: absolute;
		width: 0px;
		border: 1px #f5f5f5 solid;
		top: -200upx;
		bottom: 56upx;
		left: 50%;
		transform: translate(-50%, -0%);
		opacity: 0.8;
	}

	.uni-popup-top,
	.uni-popup-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uni-popup-top {
		top: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.uni-popup-bottom {
		left: 0;
		bottom: 0;
		width: 100%;
		min-height: 100upx;
		line-height: 100upx;
		text-align: center;
	}


	.reminder-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20px;
		width: 530upx;
		height: 680upx;
	}

	.operation-btn {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-top: 38rpx;
		width: 100%;
	}

	.agree-btn {
		width: 50%;
		background-image: linear-gradient(-90deg, rgba(72, 105, 238, 1), rgba(75, 139, 249, 1));
		color: #FFFFFF;
	}

	.disagree-btn {
		width: 50%;
		margin-right: 20upx;
		background-color: #E5E5E5;
		color: #000000;
	}

	.policy-tips {
		width: 100%;
		color: #9A9A9A;
	}

	.agree-text {
		color: #FFFFFF;
		line-height: 88upx;
	}

	.disagree-text {
		color: #9A9A9A;
		line-height: 88upx;
	}

	.agreement-introduce {
		flex-direction: row;
		flex-wrap: wrap;
	}
</style>
